<template>
  <div class="label-switch">
    <label-plane :label="label" :icon="icon">
      <div class="switch">

        <div class="no" @click="update(0)">
          <span class="txt">{{alias[0]}}</span>
          <span class="iconfont" :class="[{'iconxuanze':value!==0},{'iconxuanze1':value===0}]"></span>
        </div>
        <div class="yes"  @click="update(1)">
          <span class="txt">{{alias[1]}}</span>
          <span class="iconfont" :class="[{'iconxuanze1':value===1},{'iconxuanze':value!==1}]"></span>
        </div>

      </div>
    </label-plane>

  </div>
</template>

<script>
import labelPlane from '../../components/base/label-plane'
export default {
  props: {
    label: String,
    icon: String,
    value: Number,
    alias: {
      type: Array,
      default: function () {
        return ['否', '是']
      }
    }
  },
  methods: {
    update (index) {
      this.$emit('input', index)
    }
  },
  components: {
    labelPlane
  }
}
</script>

<style scoped lang="stylus">
  .label-switch
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
    .switch
      display: flex;
      align-items center
      justify-content center
      .no
        margin-right 47px
      .yes,.no
        dpr-font(14px)
        color:rgba(26,26,48,1);
        display flex
        align-items center
        .iconfont
          dpr-font(16px)
          margin-left 15px
          color #F9A528
</style>
